<template>
  <div :class="getClass" :style="getStyle">
    <img class="img" src="./img/circle.png" />
    <div class="content">
      <div class="value">{{ value || 0 }}</div>
      <div class="name">{{ name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Overview">
  import { onMounted, computed } from 'vue';
  import type { CSSProperties } from 'vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { setStyle } from '/@/utils/cssUtil';
  // import type { ModuleStyleConfig } from '/@/utils/cssUtil';
  import { ModuleConfig } from './types';

  const { prefixCls } = useDesign('Overview');

  const props = withDefaults(
    defineProps<{
      config?: ModuleConfig;
      value?: number;
      name?: string;
    }>(),
    {
      config: () => ({
        className: '',
        width: 325,
        height: 240,
        padding: [25, 68, 25, 68],
      }),
      value: 0,
      name: '项目总数',
    },
  );
  const getClass = computed(() => {
    const { className } = props.config;

    return [prefixCls, className];
  });
  const getStyle = computed((): CSSProperties => {
    return setStyle(props.config);
  });
  onMounted(() => {});
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-Overview';

  .@{prefix-cls} {
    position: relative;

    .img {
      width: 100%;
      height: 100%;
    }

    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: -25px;

      .value {
        font-size: 36px;
        font-weight: 600;
        color: #333333;
      }

      .name {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
</style>
